h2. Index

<a href="#links">Reference Links</a>
<a href="#definitions">Definitions</a>
<a href="#tutorials">Tutorials</a>
<a href="#cheatsheets">Cheatsheets</a>

<a name="links"></a> <h2>Reference Links</h2>

* "Formtastic RDoc Documentation":http://rdoc.info/projects/justinfrench/formtastic

* "Learning to Love Forms":http://www.slideshare.net/AaronGustafson/learning-to-love-forms-web-directions-south-07

* "Rails ActiveRecord Associations Class Methods Documentation":http://api.rubyonrails.org/classes/ActiveRecord/Associations/ClassMethods.html
** belongs_to
** has_one
** has_many
** has_and_belongs_to_many 

* W3schools
** "W3schools.com : HTML Forms":http://www.w3schools.com/html/html_forms.asp
** "W3schools.com : Input":http://www.w3schools.com/tags/tag_input.asp
** "W3schools.com : Fieldsets":http://www.w3schools.com/tags/tag_fieldset.asp
** "W3schools.com : Legends":http://www.w3schools.com/tags/tag_legend.asp
** "W3schools.com : Submit Button":http://www.w3schools.com/tags/tag_button.asp

* "Internationalization and localization - i18n":http://en.wikipedia.org/wiki/Internationalization_and_localization

<a name="definitions"></a> <h2>Definitions</h2>

<a name="clearfix"></a> <h4> Clearfix</h4>

_One of the simplest and most common layout structures involves the placing of a small, set-width DIV — perhaps navigation, a quote or a bio — within a larger wrapping DIV that contains the remaining content. In a markup this might be something like:_

<pre>
<div id="outer">
 <div id="inner"> <h2>A Column</h2> </div>
 <h1>Main Content</h1>
 <p>Lorem ipsum</p>
</div>
</pre>

_We can set the width of ‘#inner’ (let’s say ‘width:20%’), but, being a block level element, the main content will always wrap beneath, unless we float it (either left or right). Here our classic problem begins._

_If @#inner@ is shorter than @#outer#@, all is well. However, if @#inner@ grows taller than it’s wrapping parent, it breaks through the bottom edge of @#outer@. It’s as if @#outer@ forgets it’s supposed to be keeping tabs on what @#inner@ is doing as soon as you float it._

??"Above content extracted from Site Point WEB Design Reference":http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/??

<a name="dom"></a> <h4> Document Object Model (DOM)</h4>

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use. The public interface of a DOM are specified in its Application Programming Interface (API).

??"Wikipedia: The Document Object Model":http://en.wikipedia.org/wiki/Document_Object_Model??

<a name="domain"></a> <h4>Domain Specific Language (DSL)</h4>

In software development, a domain-specific language (DSL) is a programming language or specification language dedicated to a particular problem domain, a particular problem representation technique, and/or a particular solution technique. The concept isn't new—special-purpose programming languages and all kinds of modeling/specification languages have always existed, but the term has become more popular due to the rise of domain-specific modeling.

??"Wikipedia: Domain Specific Language":http://en.wikipedia.org/wiki/Domain-specific_language??

<a name="html_tag"></a> <h4> HTML Root Element</h4>

@<html>...</html>@ is the root element of an HTML document; all other elements are contained in this. The HTML element delimits the beginning and the end of an HTML document. Standardised in HTML 2.0; still current.

??"Wikipedia: HTML Element":http://en.wikipedia.org/wiki/HTML_element??

<a name="conditional_comments"></a> <h4> IE Conditional Comments</h4>

<pre>
<!--[if IE]>
<![endif]-->

<!--[if IE 5]>
<![endif]-->

<!--[if IE 5.0]>
<![endif]-->

<!--[if IE 5.5]>
<![endif]-->

<!--[if IE 6]>
<![endif]-->

<!--[if IE 7]>
<![endif]-->

<!--[if gte IE 5]>
<![endif]-->

<!--[if lt IE 6]>
<![endif]-->

<!--[if lte IE 5.5]>
<![endif]-->

<!--[if gt IE 6]>
<![endif]-->
</pre>


<a name="meta"></a> <h4>Metaprogramming </h4>
Metaprogramming is the writing of computer programs that write or manipulate other programs (or themselves) as their data, or that do part of the work at compile time that would otherwise be done at runtime. In many cases, this allows programmers to get more done in the same amount of time as they would take to write all the code manually, or it gives programs greater flexibility to efficiently handle new situations without recompilation.

??"Wikipedia: Metaprogramming":http://en.wikipedia.org/wiki/Metaprogramming??

<a name="tutorials"></a>

h2. Tutorials

h4. Railscasts

Ryan Bates featured Formtastic in "episode 184":http://railscasts.com/episodes/184-formtastic-part-1, providing a perfect introduction to not only the code, but the concepts behind the code, and why Formtastic is the way it is.

"Episode 185":http://railscasts.com/episodes/185-formtastic-part-2 digs a bit deeper with more advanced functionality of Formtastic including handling many-to-many associations, required fields, hints, inline errors and styling.

h4. Misc

Michael Guterl wrote about "extending formtastic with a sprinkle of jQuery":http://diminishing.org/?p=116 it briefly shows how to construct additional input elements using :as.

Jésus Lopes wrote a "blog post in pt-BR":http://jlopes.zigotto.com.br/rails/formularios-com-formtastic

<a name="cheatsheets"></a>
<h2>Cheatsheets</h2>

Pending ...
